const $ = id => document.getElementById(id);

const formatNum = n =>
  n > 1e8 ? (n / 1e8).toFixed(1) + '亿' :
  n > 1e4 ? (n / 1e4).toFixed(1) + '万' : n;

const formatTime = t => {
  const m = Math.floor(t / 60), s = t % 60;
  return `${m}:${s.toString().padStart(2, '0')}`;
};

async function fetchData() {
  const res = await fetch('data/task.json');
  return res.json();
}

function renderPlaylist(list) {
  const box = $('playlist');
  box.innerHTML = list.map(item => `
    <div class="card">
      <img src="${item.cover}" alt="">
      <div class="title nowrap">${item.title}</div>
      <div class="num">播放量：${formatNum(item.listen_num)}</div>
    </div>`).join('');
}

function renderSonglist(list) {
  const box = $('songlist');
  box.innerHTML = list.map(item => `
    <div class="song">
      <img src="${item.cover}" alt="">
      <div class="info">
        <div class="name">${item.name}</div>
        <div class="singer">${item.singer.join(' / ')}</div>
      </div>
      <div class="time">${formatTime(item.interval)}</div>
    </div>`).join('');
}

function renderMvlist(list) {
  const box = $('mvlist');
  box.innerHTML = list.map(item => `
    <div class="mv-card">
      <img src="${item.cover}" alt="" class="mv-cover">
      <div class="mv-mask"></div>
      <img src="imgs/cover_play.png" class="mv-play">
      <div class="mv-info">
        <div class="mv-title nowrap">${item.title}</div>
        <div class="mv-singer">${item.singer}</div>
      </div>
    </div>`).join('');
}

(async () => {
  const data = await fetchData();
  renderPlaylist(data.playlist);
  renderSonglist(data.songlist);
  renderMvlist(data.mvlist);
})();